<template>
  <view class="team page--column">
    <van-sticky>
      <van-search
        :value="value"
        placeholder="请输入姓名或电话号码"
        use-action-slot
        @change="onChange"
        @search="onSearch"
      >
        <view slot="action" @tap="searchMember">搜索</view>
      </van-search>
      <view class="box">
        <view class="b-item">
          <view class="title">{{ teamName }}的等级</view>
          <view class="value">{{ typeName }}</view>
        </view>
        <view class="b-item">
          <view class="title">{{ teamName }}的团队人数</view>
          <view class="value">{{ black_Get(teamMemberInfo,'teamMemberCount',0) }}</view>
        </view>
      </view>
      <view class="nav">
        <view class="name">
          导航：我({{ mySubMemberCount }})>
          <text
            v-for="(n,i) in navTitleList"
            :key="i"
          >{{ black_Get(n,'nickname') }}({{ black_Get(n,'_raw.submemberCount',0) }})></text>
        </view>
        <view class="button" @tap="backBefore()">返回上级</view>
      </view>
      <view class="table-header">
        <view class="t-col1">姓名</view>
        <view class="t-col2">属性</view>
        <view class="t-col3">电话</view>
        <view class="t-col4">查看下级</view>
      </view>
    </van-sticky>
    <view class="table-body col-main">
      <list-page :config="page.config" :form="page.form">
        <template v-slot="{listData}">
          <view class="t-row" v-for="(item,i) in listData" :key="i" @tap="checkSubmember(item)">
            <view class="t-col1">{{ black_Get(item,'nickname') }}</view>
            <view class="t-col2">{{ black_Get(item,'_raw.typeName') }}</view>
            <view class="t-col3">{{ black_Get(item,'mobile') }}</view>
            <view class="t-col4">{{ black_Get(item,'_raw.submemberCount',0)}}人</view>
          </view>
        </template>
      </list-page>
    </view>
  </view>
</template>

<script>
import listPage from '@/components/list-page';
import {
  model
} from '@/model';

const {
  Member
} = model.collection;

export default {
  components: {
    listPage
  },
  data () {
    return {
      entitys: {
        Member
      },
      page: {
        config: {
          entity: 'Member',
          action: 'page',
          enablePull: true
        },
        form: {
          query: {
            pId: '',
            keyword: '',
          }
        }
      },
      value: '',
      MainId: 0,
      typeName: '',
      mySubMemberCount: 0,
      teamMemberInfo: {},
      currentMember: {},
      navTitleList: [],
    }
  },
  onLoad (options) {
    this.MainId = Number(options.memberId);
    this.mySubMemberCount = Number(options.subMemberCount)
    this.page.form.query.pId = Number(options.memberId);
    this.getMemberTypeName(Number(options.typeId));
    this.getTeamMemberCount()
  },
  computed: {
    teamName () {
      return this.navTitleList.length === 0 ? '我' : this.currentMember.nickname
    }
  },
  methods: {
    getMemberTypeName (id) {
      this.typeName = this.entitys.Member.filter('type', id);
      this.MainTypeName = this.typeName;
    },
    getTeamMemberCount () {
      Member.sendApi('info', {
        params: {},
        data: {
          dataType: 2,
          query: {
            id: this.page.form.query.pId
          }
        }
      }).then(res => {
        const {
          status,
          data,
        } = res;
        if (status) {
          this.teamMemberInfo = data
        }
      })
    },
    checkSubmember (current) {
      this.currentMember = current;
      this.typeName = current._raw.typeName;
      this.navTitleList.push(current);
      this.page.form.query.pId = current.id
      this.getTeamMemberCount()
    },
    backBefore () {
      if (this.navTitleList.length === 0) {
        this.toast('当前已是最上一级了')
      } else if (this.navTitleList.length === 1) {
        this.navTitleList.splice(-1, 1);
        this.page.form.query.pId = this.MainId;
        this.typeName = this.MainTypeName;
        this.getTeamMemberCount()
      } else {
        this.navTitleList.splice(-1, 1);
        let curIndex = this.navTitleList.length - 1;
        this.currentMember = this.navTitleList[curIndex];
        this.typeName = this.currentMember._raw.typeName;
        this.page.form.query.pId = this.currentMember.id
        this.getTeamMemberCount()
      }
    },
    onChange (e) {
      this.value = e.detail;
    },
    searchMember () {
      if (this.navTitleList.length > 0) {
        this.page.form.query.pId = this.currentMember.id
      } else {
        this.page.form.query.pId = this.MainId
      }
      this.page.form.query.keyword = this.value
    },
  }
};
</script>

<style lang="less">
page {
  background-color: #f7f7f7;

  .team {
    display: flex;
    flex-direction: column;

    /deep/.van-sticky-wrap--fixed {
      background-color: #fff;
    }

    .box {
      width: 100%;
      display: flex;
      justify-content: space-around;
      align-items: center;

      .b-item {
        width: 330rpx;
        height: 160rpx;
        background: #f7f7f7;
        border-radius: 10rpx;

        .title {
          margin-top: 20rpx;
          margin-left: 20rpx;
          width: 330rpx;
          height: 27rpx;
          text-align: left;
          font-size: 28rpx;
          font-weight: 500;
          color: #666666;
        }

        .value {
          width: 330rpx;
          height: 100rpx;
          line-height: 100rpx;
          text-align: center;
          font-size: 45rpx;
          font-weight: 500;
          color: #333333;
        }
      }
    }

    .nav {
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: 100vw;
      height: 90rpx;
      margin-top: 20rpx;
      background: #f7f7f7;

      .name {
        width: 500rpx;
        margin-left: 20rpx;
        font-size: 28rpx;
        font-weight: 500;
        word-break: break-all;
        color: #666666;
      }

      .button {
        width: 158rpx;
        height: 55rpx;
        margin-right: 20rpx;
        line-height: 55rpx;
        text-align: center;
        font-size: 27rpx;
        color: #fff;
        background: #db187c;
        border-radius: 30rpx;
      }
    }

    .table-header {
      display: flex;
      flex-direction: row;
      align-items: center;
      width: 750rpx;
      height: 90rpx;
      padding: 0 20rpx;
      background: #ffffff;
      font-size: 30rpx;
      font-weight: bold;
      color: #000000;

      .t-col1 {
        width: 170rpx;
      }

      .t-col2 {
        width: 170rpx;
      }

      .t-col3 {
        width: 230rpx;
      }

      .t-col4 {
        width: 170rpx;
      }
    }

    .table-body {
      padding: 0 10rpx;
      width: 750rpx;
      padding: 0 20rpx;
      font-size: 26rpx;
      color: #333333;

      .t-row {
        display: flex;
        flex-direction: row;
        align-items: center;
        width: 750rpx;
        height: 90rpx;
        border-bottom: 1rpx solid #eaeaea;

        .t-col1 {
          width: 170rpx;
        }

        .t-col2 {
          width: 170rpx;
        }

        .t-col3 {
          width: 230rpx;
        }

        .t-col4 {
          width: 170rpx;
          font-weight: bold;
          color: #db187c;
        }
      }
    }
  }
}
</style>